import React, { Component } from 'react';

/**
 * 处理多个输入项
 */
export default class Reservation extends Component {

    // 状态数据
    state = {
        isGoing: true,
        numberOfGuests: 2
    }

    // 事件处理函数
    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;
    
        this.setState({
          [name]: value
        });
    }

    render() {
        return (
            <form>
              <label>
                参与:
                <input
                  name="isGoing"
                  type="checkbox"
                  checked={this.state.isGoing}
                  onChange={(e) => this.handleInputChange(e)} />
              </label>
              <br />
              <label>
                来宾人数:
                <input
                  name="numberOfGuests"
                  type="number"
                  value={this.state.numberOfGuests}
                  onChange={(e) => this.handleInputChange(e)} />
              </label>
            </form>
        );
    }
}
